<!DOCTYPE html>
<html lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>部门管理</title>
	<link href="../../css/style.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="../../js/jquery.js"></script>
	<script type="text/javascript" src="../../js/api.js"></script>
	<script type="text/javascript" src="../../js/axios.js"></script>
	<script type="text/javascript" src="../../js/commons/messageInfo.js"></script>
	<script type="text/javascript" src="../../js/system/dept/deptList.js"></script>

	<script src="../../js/commons/react.js"></script>
	<script src="../../js/commons/reactDom.js"></script>
	<script src="../../js/commons/babel.js"></script>

	<script type="text/javascript">
		let timer
		function tipOpen(content) {
			$(".tipright p").text(content);
			$("#tip").fadeIn(200);
		}

		function tipClose() {
			clearInterval(timer)
			$("#tip").fadeOut(200);
		}
	</script>
</head>

<body>

	<div class="place"> <span>位置：</span>
		<ul class="placeul">
			<li><a href="../users/userList.html">系统管理</a></li>
			<li><a href="#">部门管理</a></li>
		</ul>
	</div>
	<div class="rightinfo">
		<form id="form">
			<ul class="tools">
				<li> <label>部门名称:</label>
					<input type="text" id="deptName" />
				</li>
				<li id="select">
				</li>
				<li class="subBut" onclick="query()"><img src="../../images/t06.png" />查询</li>
				<li class="subBut" onclick="window.location.href='deptAdd.html'"><img src="../../images/t01.png" />添加</li>
			</ul>
			<table class="tablelist">
				<thead>
					<tr>
						<th>序号</th>
						<th>部门编号</th>
						<th>部门名称</th>
						<th>所属地区</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody id="tbody">

				</tbody>
			</table>
			<div id="pagination" style="float: right;margin-right: 50px;margin-top: 10px;">
			</div>
		</form>
		<!-- 提示框 -->
		<div id="tip" class="tip">
			<div class="tiptop"><span>提示信息</span><a onclick="tipClose()"></a></div>
			<div class="tipinfo"> <span><img src="../../images/ticon.png" /></span>
				<div class="tipright">
					<p></p>
					<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
				</div>
			</div>
			<div class="tipbtn">
				<input name="" type="button" class="sure" value="确定" onclick="clickConfirm()" />
				&nbsp;
				<input name="" type="button" class="cancel" value="取消" onclick="tipClose()" />
			</div>
		</div>
	</div>
	<script type="text/babel">
		appendMsgBox()
		query()

		const Select = () => {
			const [area, setArea] = React.useState(null)
			const [city, setCity] = React.useState(null)

			React.useEffect(() => {
				getArea(setArea, setCity)
			}, [])

			const selectProvince=()=>{
				let id=$('#province').val()
				for(let i=0;i<area.length;i++){
					if(area[i].id==id){
						setCity(area[i].city)
						break
					}
				}
			}

			return (
				<div>
					所属区域：
					<select onChange={selectProvince} id="province">
						<option value={0}>请选择省份</option>
						{area !== null && area.map((item, index) => (<option key={item.id} value={item.id}>{item.pName}</option>))}
					</select>
					<select id='city'>
						<option value={0}>请选择城市</option>
						{city !== null && city.map(item => (<option key={item.id} value={item.id}>{item.cName}</option>))}
					</select>
				</div>
			)
		}

		ReactDOM.createRoot(document.querySelector('#select')).render(<Select />)
	</script>
</body>

</html>